<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head th:replace="_fragments :: head(~{::title})">
		<meta charset="UTF-8">
		<title>图书列表</title>
		<link type="text/css" rel="stylesheet" href="../static/dist/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="../static/css/index.css">
		<link rel="stylesheet" type="text/css" href="../static/css/animate.css">
	
	</head>
	<body>
	<!--图书列表 begin-->
	<div class="container">
		<div class="row">
			<div class="col-sm-6 col-md-3" th:each="book:${bookList}">
				<div class="thumbnail">
					<a href="details.html"><img src="/images/beiwei78.jpg" th:src="@{'/images/'+${book.imgUrl}}" alt="通用的占位符缩略图"></a>
					<div class="caption">
						<h3 th:classappend="h3-height" th:text="${book.name}">北纬78°</h3>
						<p th:classappend="p-height">价格:<span th:text="${book.newPrice}">19.5</span>元&nbsp;&nbsp;作者:<span th:text="${book.author}">陈丹燕</span>&nbsp;&nbsp;</p>
						<p>
							<a href="details.html">
								更多信息
							</a>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--图书列表end-->

	<!--分页begin-->
	<div class="container">
		<div class="row text-center">
			<div class="col-md-12">
				<ul class="pagination">
					<li><a href="javascript:void(0)" th:onclick="|loadData(1,${category})|">首页</a></li>
					<li class="disabled"><a href="javascript:void(0)" th:onclick="|loadData(${pre},${category})|">«</a></li>
					<li th:each="page:${pages}" th:class="${cur == page} ? 'active':''" th:href="@{/home/getBookListData(page=page,category=${category})}">
						<a href="javascript:void(0)" th:text="${page}" th:onclick="|loadData(page,${category})|">1</a>
					</li>
<!--					<li><a href="#">2</a></li>-->
<!--					<li class="active"><a href="#">3</a></li>-->
<!--					<li><a href="#">4</a></li>-->
<!--					<li><a href="#">5</a></li>-->
					<li><a href="javascript:void(0)" th:onclick="|loadData(${next},${category})|">»</a></li>
					<li><a href="javascript:void(0)" style="border: 1px solid #ddd;" th:onclick="|loadData(1,${pages})|">尾页</a></li>
					<li><a style="border: 0px;margin-left: 0px;" th:text="${'当前页'+cur+'/'+pages+'总页数'}">当前页3/5总页</a></li>
					<li>

						<div id="search" class="input-group" style="positon:relative;">
							<input type="text" class="form-control" placeholder="跳转指定页">
							<span class="input-group-btn">
							            <button class="btn btn-info btn-search">GO</button>
									</span>
						</div>
					</li>
					<li><a style="padding-top: 0px;border: 0px;">
						<label>每页显示:</label>
						<select id="pageSize" class="form-control" style="width: 100px;display: inline;">
							<option value="2">2</option>
							<option value="2">4</option>
							<option value="2">6</option>
							<option value="2">8</option>
						</select>
						<label>条</label>
					</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!--分页end-->
	</body>
</html>
